<template>
	<view>
		<u-overlay :show="show" @click="close"></u-overlay>
		<view :class="popupStyle">
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		close() {
			this.$emit('close')
		}
	},
	computed: {
		popupStyle() {
			return 'popup' + ' ' + (this.show ? '' : 'close')
		}
	}
}
</script>

<style lang="scss">
	.popup {
		z-index: 10080;
		background-color: #fff;
		width: 750rpx;
		min-height: 150rpx;
		max-height: 700rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		transition: bottom 0.3s ease-in-out;
		display: flex;
		flex-direction: column;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;	
	}
	.close {
		bottom: -600rpx;
	}
</style>